/*
Css Configuration File for Teach Tab
 */

#teach-tab{
	width:100%;
	margin:0;
	padding:0;
	color:$black;
	background-color: $white;
	@media(min-width:$mobile) and (max-width:$mobile-max){
		
	}
	.teach-button li{
		float: left;
		margin-right: 15px;
		@media(min-width:$mobile) and (max-width:$tablet){
			width:200px;
			height:52px;
		}
		a{
			@include button($black,$white,$yellow,$black);
			padding:15px 25px;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 10px;
		}
	}
	.sort-title{
		padding: 35px 0 !important;
		font-family: $verdana;
		text-align: right;
		font-weight: bold;
		font-size: 10px;
		text-transform: uppercase;
	}
	.thumbnail{
		border:1px solid $black;
		border-radius: 0;
		padding:14px;
		margin-left:-6px;
		margin-bottom: 42px;
			@media(width:$mobile-max){
				width:307px;
				margin:10px auto;
			}
		img{
			max-width: 100%;
		}
		h3{
			text-transform: uppercase;
			@media(width:$tablet){
				font-size: 28px;
			}
			@media(width:$mobile){
				font-size: 28px;
			}
		}
		span{
			text-transform: uppercase;
			@media(max-width:$tablet){
				float:none !important;
				text-align:left;
				font-size:10px;
				display: block;
			}
		}
		.flow-over{
			position: absolute;
			top: 97px;
			background: rgba(255, 255, 255, 0.7);
			width: 90%;
			margin: 0;
			left: 16px;
			padding: 30px 22px 18px 22px;
			@media(width:$tablet){
				top:38px;
				overflow:hidden;
			}
			@media(width:$mobile-max){
				margin: 0 auto;
				padding: 30px 69px 30px 62px;
				width: 82%;
				overflow:hidden;
			}
			@media(width:$mobile){
				margin: 0 auto;
			    overflow: hidden;
			    padding: 18px 57px 16px 21px;
			    width: 87%;
			    top:61px;
			}
		}
		.teach-button{
			@include button($black,$white,$yellow,$white);
			font-weight: bold;
			font-size: 9px;
			font-family: $verdana;
			padding: 17px 7px;
			text-transform: uppercase;
			@media (min-width: $tablet) and (max-width: $tablet-max){
			/* Media Query Between Screen 768px and 980px  */		
				font-size: 8px;
				padding: 13px 8px;
			}
			@media(max-width:$tablet){
				float:none !important;
				text-align:center;
				display: block;
			}
		
		}
		.caption{
			padding:12px 0 12px 0;
		}
		small{
			text-transform: uppercase;
		}
	}
}

.mopo{
	margin:0 !important;
	padding:0 !important;
}